<template>
  <div class="map-list-left-wrapper">
    <div class="title">
      <el-button type="primary" link @click="handleClose"
        ><el-icon><ArrowLeftBold /></el-icon>返回房屋列表</el-button
      >
    </div>
    <div class="top">
      <div class="top-icon" />
      <div class="top-des">
        <span class="top-des-name">{{ form.name }}</span>
        <span class="top-des-address">{{ form.address }}</span>
      </div>
    </div>
    <div class="bottom">
      <template v-if="!currentShowFloor">
        <div class="bottom-title">房屋基本信息</div>
        <div class="bottom-content">
          <span class="label">产权单位:</span>
          <span class="value">{{ form.propertyOwner }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">不动产权证号:</span>
          <span class="value">{{ form.code }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">房屋名称:</span>
          <span class="value">{{ form.name }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">所在园区:</span>
          <span class="value">{{ form.parkId }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">详细地址:</span>
          <span class="value">{{ form.address }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">经纬度:</span>
          <span class="value">{{ form.position }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">建成年份:</span>
          <span class="value">{{ form.year }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">房屋类型:</span>
          <span class="value">{{
            getDictValue('buildingType', form.houseType)
          }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">房屋结构:</span>
          <span class="value">{{
            getDictValue('buildingType', form.houseType)
          }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">建筑高度(m):</span>
          <span class="value">{{ form.height }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">建筑总层数:</span>
          <span class="value">{{ form.floors }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">地下层数:</span>
          <span class="value">{{ form.undergroundFloors }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">证载用途:</span>
          <span class="value">{{ form.usage }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">证载面积(m²):</span>
          <span class="value">{{ form.certificateArea }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">实际面积(m²):</span>
          <span class="value">{{ form.actualArea }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">使用情况:</span>
          <span class="value">{{
            getDictValue('buildingType', form.houseType)
          }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">实物状况:</span>
          <span class="value">{{
            getDictValue('buildingStatus', form.houseStatus)
          }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">是否为危房:</span>
          <span class="value">{{ getDictValue('yn', form.dangerHouse) }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">危房等级:</span>
          <span class="value">{{
            getDictValue('buildingLevel', form.dangerLevel)
          }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">是否为重点区域:</span>
          <span class="value">{{ getDictValue('yn', form.keyArea) }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">入驻企业数:</span>
          <span class="value">{{ form.legendUrl }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">备注说明:</span>
          <span class="value">{{ form.remark }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">房屋范围:</span>
          <span class="value">
            <FileList width="150" :list="form.geojsonFile" />
          </span>
        </div>
        <div class="bottom-content">
          <span class="label">房屋照片:</span>
          <span class="value"
            ><FileList fileType="picture" :list="form.imgList"
          /></span>
        </div>
        <div class="bottom-title">房屋所在土地信息</div>
        <div class="bottom-content">
          <span class="label">产权人:</span>
          <span class="value">{{
            getDictValue('propertyUnit', form.land.propertyOwner)
          }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">土地产权证号:</span>
          <span class="value">{{ form.land.certificate }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">宗地名称:</span>
          <span class="value">{{ form.land.name }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">土地面积(m²):</span>
          <span class="value">{{ form.land.area }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">土地性质:</span>
          <span class="value">{{
            getDictValue('landNature', form.land.character)
          }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">使用情况:</span>
          <span class="value">
            {{ getDictValue('landUsage', form.land.useStatus) }}</span
          >
        </div>
        <div class="bottom-content">
          <span class="label">使用年限:</span>
          <span class="value">{{ form.land.useYear }}</span>
        </div>
        <div class="bottom-content">
          <span class="label">备注:</span>
          <span class="value">{{ form.land.remark }}</span>
        </div>
      </template>
      <template v-else>
        <div
          class="bottom-tenant"
          v-for="(item, index) of showTenantList"
          :key="index"
        >
          <div class="bottom-content">
            <span class="label">承租类型：</span>
            <span class="value"
              ><el-tag :type="getDictStyle('tenantType', item.type)">{{
                getDictValue('tenantType', item.type)
              }}</el-tag></span
            >
          </div>
          <div class="bottom-content">
            <span class="label"
              >承租{{ getDictValue('tenantType', item.type) }}名称</span
            >
            <span class="value">{{ item.name }}</span>
          </div>
          <div
            class="bottom-content"
            v-if="
              ['企业', '政府'].includes(getDictValue('tenantType', item.type))
            "
          >
            <span class="label">统一社会信用代码：</span>
            <span class="value">{{ item.code }}</span>
          </div>
          <div class="bottom-content" v-eles>
            <span class="label">身份证号</span>
            <span class="value">{{ item.code }}</span>
          </div>
          <div class="bottom-content">
            <span class="label">经营范围：</span>
            <span class="value">{{ item.businessScope }}</span>
          </div>
          <div class="bottom-content">
            <span class="label">备注：</span>
            <span class="value">{{ item.remark }}</span>
          </div>
        </div>
      </template>
    </div>
    <div class="choose">
      <div
        class="choose-item"
        :class="{ active: currentShowFloor === item.value }"
        v-for="(item, index) of chooseOptions"
        :key="index"
        @click="handleChangeFloor(item)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowLeftBold } from '@element-plus/icons-vue'
import FileList from '@/components/fileList/index.vue'
import { buildingDetail } from '@/api/manager/dataManage/building'
import { useDict } from '@/hooks/useDict'
const {
  dictOptions,
  initListDictOptions,
  initTreeDictOptions,
  getDictValue,
  getDictStyle,
} = useDict()
const props = defineProps({
  pkid: {
    type: String,
  },
})
const emit = defineEmits(['close'])
const handleClose = () => {
  chooseOptions.value = [
    {
      name: '整栋',
      value: '',
    },
  ]
  form.value = { land: {} }
  emit('close')
}
const chooseOptions = ref([
  {
    name: '整栋',
    value: '',
  },
])
const form = ref({
  land: {},
})
const handleDetail = async () => {
  const res = await buildingDetail({ pkid: props.pkid })
  if (res.success) {
    // 处理园区范围文件
    if (res.data.geoJsonFile) {
      res.data.geojsonFile = [res.data.geoJsonFile]
    }
    delete res.data.geoJsonFile
    // 处理园区图片
    res.data.files = res.data.imgList
    delete res.data.imgList
    // 处理土地信息
    if (res.data.mapRegion) {
      res.data.land = [res.data.mapRegion]
    }
    form.value = { ...res.data }

    const floorsOptions = []
    if (form.value.undergroundFloors) {
      for (let i = 1; i <= Number(form.value.undergroundFloors); ++i) {
        floorsOptions.push({ name: -i + 'F', value: -i })
      }
      for (
        let i = 1;
        i <= Number(form.value.floors) - Number(form.value.undergroundFloors);
        ++i
      ) {
        floorsOptions.push({ name: i + 'F', value: i })
      }
    }
    chooseOptions.value = chooseOptions.value.concat(floorsOptions)
  } else {
    ElMessage.error(res.message)
  }
}

const currentShowFloor = ref('')
const showTenantList = ref([])
const handleChangeFloor = (item) => {
  currentShowFloor.value = item.value
  if (item.value !== '') {
    showTenantList.value = form.value.renterList.filter(
      (i) => i.floor === item.value,
    )
  } else {
    showTenantList.value = []
  }
}
onMounted(() => {
  handleDetail(1)
})
</script>
<style lang="scss" scoped>
.map-list-left-wrapper {
  width: 320px;
  height: calc(100% - 40px);
  background-color: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  position: absolute;
  left: 20px;
  top: 20px;
  display: flex;
  flex-direction: column;
  .title {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    padding: 0 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d5deed;
    background: #f0f5fe;
  }

  .top {
    width: 100%;
    height: 85px;
    box-sizing: border-box;
    padding: 12px 19px;
    border-bottom: 1px solid #d5deed;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    &-icon {
      width: 38px;
      height: 50px;
      background: url('@/assets/imgs/manager/building.png') no-repeat;
      background-size: 100% 100%;
    }
    &-des {
      width: 230px;
      height: 100%;
      display: flex;
      flex-direction: column;
      &-name {
        font-weight: 400;
        font-size: 16px;
        color: #000000;
        margin-bottom: 7px;
      }
      &-address {
        font-weight: 400;
        font-size: 14px;
        color: #757575;
      }
    }
  }
  .bottom {
    flex: 1;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 20px;
    &-title {
      width: 157px;
      height: 32px;
      background: url('@/assets/imgs/manager/title-bg.png') no-repeat;
      background-size: 100% 100%;
      font-weight: 500;
      font-size: 14px;
      color: #151515;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding-left: 8px;
      margin-bottom: 10px;
    }
    &-content {
      margin-bottom: 20px;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      .label {
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        margin-right: 5px;
        display: inline-block;
      }
      .value {
        flex: 1;
        font-weight: 400;
        font-size: 14px;
        color: #757575;
        display: inline-block;
        word-wrap: break-word;
        word-break: break-all;
      }
    }
    &-tenant {
      width: 100%;
      border-bottom: 1px dashed #d5deed;
      margin-bottom: 20px;
    }
  }
  .choose {
    position: absolute;
    top: 48px;
    right: -34px;
    width: 34px;
    background: #d5deed;
    border-radius: 2px;
    &-item {
      width: 34px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 400;
      font-size: 14px;
      color: #000000;
      border-radius: 2px;
      cursor: pointer;
      &.active {
        color: #ffffff;
        background: linear-gradient(0deg, #4576ee, #6297f5);
      }
    }
  }
}
</style>
